<template>
  <el-submenu id="submenu" :index="route.name" v-if="route.children">
    <template slot="title">
      <i :class="route.meta.icon ? route.meta.icon : ''"></i>
      <span slot="title">{{ route.meta.title }}</span>
    </template>
    <el-menu-item
      v-for="routeChild in route.children"
      :key="routeChild.path"
      :index="routeChild.path"
      @click="addLocalTabs(routeChild)"
    >
      {{ routeChild.meta.title }}
    </el-menu-item>
  </el-submenu>
</template>

<script>
export default {
  props: {
    route: {
      type: Object,
      require: true,
    },
  },
  created() {
    // console.log(this.route);
  },
  methods: {
    addLocalTabs(route) {
      // console.log(route);
      // 添加本地缓存
      const openTabs = JSON.parse(localStorage.getItem("openTabs")) || [];
      // 判断你点击的侧边栏数据，本地缓存里是否存在（重复性判断）
      const isExist = openTabs.some((item) => item.name === route.name);
      // 不重复就要存起来
      if (!isExist) {
        openTabs.push(route);
      }
      // 再次存到缓存中local
      localStorage.setItem("openTabs", JSON.stringify(openTabs));
      // 去传值触发tabs标签页的选中高亮
      this.$emit("upActTabs", route.name);
      this.$emit("upOpenTabs", openTabs); // 传点击的路由标签
    },
  },
};
</script>

<style lang="less" scoped>
#submenu {
  // 如果以后F12发现样式上没有模块话ID的话，修改element的样式就需要开启样式穿透
  // /deep/ ::v-deep
  ::v-deep .el-submenu__title {
    height: 65px;
    line-height: 65px;
  }

  // 侧边栏选中
  .el-menu-item {
    transition: all 0.2s;
    &.is-active {
      background-color: #edf5fe;
      border-right: 5px solid @baseColor;
    }
  }
}
</style>

<style lang="less">
// 不用样式穿透，改element的样式方法。注意要加上父盒子
// #submenu {
//   .el-submenu__title {
//     height: 65px;
//     line-height: 65px;
//   }
// }
</style>
